<template>
  <div>
      <Teleport to="body">
        <div id="small"></div>
      </Teleport>
      <div class="bigBox">
       <Teleport to="#small" :disabled="disabled">
          <div id="mse"></div>
       </Teleport>
     </div>
     <div style="height: 1000px;"></div>
  </div>
</template>

<script lang='ts' setup>
import {onMounted,ref} from 'vue'
import Player from 'xgplayer'
const disabled=ref<boolean>(true)
onMounted(()=>{
  new Player({
    id:'mse',
    url:'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
    poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
  })
  document.addEventListener('scroll',function(){
    if((document.documentElement.scrollTop||document.body.scrollTop)>340){
      disabled.value=false
    }else{
      disabled.value=true
    }
  })
})
</script>

<style lang='scss' scoped>
.bigBox{
  width: 600px;
  height: 340px;
  border: 1px solid #000;
}
#small{
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 240px;
      height: 140px;
      border: 1px solid #000;
    }
</style>